<template>
    <div class="showmenu">
        <div class="jcrs">
        <span>就餐人数:</span>
        <el-input v-model="input" placeholder="请输入就餐人数" style="width:15rem"></el-input>
        <el-button type="primary" sizi="small" style="margin-left:0.6rem">确定</el-button>
        </div>
        <div>
            <h1>菜品列表</h1>
            <el-select v-model="value" placeholder="请选择菜品类型">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <xkxFoodshow  v-for="item in foodList" :fooodData="item"  @allfood="xiadan"></xkxFoodshow>
         <div class="xiadanBtn">
            <el-button type="primary" size="medium" @click='xiadanfood'>下单</el-button>
            <el-button type="primary" size="medium" @click='addfood'>加菜</el-button>
         </div>



    </div>
</template>

<script>
    import * as api from "../utils/api";
     import xkxFoodshow from "./xkxFoodshow";
    export default {
        name: "ShowMenu",
        props:['tableId'],
        data(){
            return{
                input:'',
                foodList:'',
                xiandanzhuantai:'',
                options: [{
                    value: '选项1',
                    label: '炒菜'
                }, {
                    value: '选项2',
                    label: '小吃'
                }],
                value:'',
                tablezt:'', //餐桌的状态
                table:{   //餐桌的类容

                },
                allfood:[],
                addOrderingFood:{
                    food_table_id:'',
                    foods:{}
                }
            }
        },
        components:{
            xkxFoodshow,
        },
        created(){
            console.log(this.tableId)
            this.axios({
                url:api.selectAllFood,
                method:'get',
            }).then(data=>{
                console.log(data)
                this.foodList=data.data.data
            })
            },
         methods: {
             //点菜组件传过来的值
             xiadan(data) {
                 this.allfood.push(data)
                 // console.log(this.allfood)
                 for (var i = 0; i < this.allfood.length; i++) {
                     for (var j = i + 1; j < this.allfood.length; j++) {
                         if (this.allfood[i].food_id == this.allfood[j].food_id) {
                             //如果第一个等于第二个，splice方法删除第二个
                             this.allfood.splice(j, 1);
                             j--;
                         }
                     }
                 }
             },
             xiadanfood(){
                 this.addOrderingFood.food_table_id=this.tableId
                 this.addOrderingFood.foods=this.allfood
                 let data=this.addOrderingFood
                 this.axios({
                     url:api.POST_ADDFOOD,
                     method:'post',
                     data:data
                 }).then(data=>{
                     console.log(data)
                     // this.xiandanzhuantai=data.data
                     this.$message({
                         message: '恭喜你，这是一条成功消息',
                         type: 'success'
                     })
                     if(data.data.code===200){
                             this.$emit('zhangshi')
                     }
                 }).catch(err=>{
                     console.log(err)
                 })
             },
             addfood(){
                 this.addOrderingFood.food_table_id=this.tableId
                 this.addOrderingFood.foods=this.allfood
                 let data=this.addOrderingFood
                 this.axios({
                     url:api.UPDATAORDERINGFOODBYID,
                     method:'psot',
                     data:data
                 }).then(data=>{
                     console.log('加菜成功')
                     console.log(data)
                 })
             }
         }
    }
</script>

<style scoped >

.jcrs{
    padding: 20px;
    font-size: 1.4rem;
    text-align: left;
}
    .xiadanBtn{
        position: absolute;
        right: 8rem;
        bottom: 5rem;
    }



</style>